<template>
	<view>
		<view class="top u-text-pink7 u-flex-center u-flex-col u-col-top">
			<view class="top-big">
				当月连续签到<text>{{pointsDay}}</text>天
			</view>
			<view class="top-sma">
				连续签到七天可获得{{sevenPoints}}积分
			</view>
		</view>
		<view class="bottom">
			<view class="bot-tit">
				签到得积分，兑换优惠券
			</view>
			<view class="sign-in u-flex u-row-between u-flex-wrap">
				<view class="sign-item" v-for="item,index in signInList"
					:class="index + 1 <= pointsDay ? 'sign-css' : ''">
					<view class="sign-day">第{{item.day}}天</view>
					<image src="@/static/new/user/points1.png" mode="widthFix"></image>
					<view class="sign-points">{{item.points}}积分</view>
				</view>
				<view class="sign-item sign-item7" :class="7== pointsDay ? 'sign-css' : ''">
					<view class="sign-left">
						<view class="sign-day">第七天</view>
						<view class="sign-points">{{sevenPoints}}积分</view>
					</view>
					<image src="@/static/new/user/points2.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="btn u-flex-center" :class="isSign ? 'btn-grey' : ''" @tap="$u.throttle(signInClick, 1500)">
			{{isSign ? '已签到' :'签到'}}
		</view>
	</view>
</template>

<script>
	import * as SignApi from '@/api/signIn'
	import * as SettingApi from '@/api/setting'

	export default {

		data() {
			return {
				//签到数组
				signInList: [{
					day: '一',
					points: 0,
				}, {
					day: '二',
					points: 0,
				}, {
					day: '三',
					points: 0,
				}, {
					day: '四',
					points: 0,
				}, {
					day: '五',
					points: 0,
				}, {
					day: '六',
					points: 0,
				}],
				//签到七天赠送的积分
				sevenPoints: 0,
				//当前签到天数
				pointsDay: 0,
				//当天是否签到
				isSign: null,
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		created() {
			// 获取当天是否签和已签到天数
			this.getSignIn()
			// 获取签到积分数量
			this.getSetting()
		},

		methods: {
			// 获取当天是否签和已签到天数
			getSignIn() {
				const app = this
				SignApi.list()
					.then(result => {
						const res = result.data.result

						const today = new Date();
						const yesterday = new Date(today);
						yesterday.setDate(yesterday.getDate() - 1);

						const today1 = app.formatDate(today) //今天日期
						const yesterday1 = yesterday.toISOString().split('T')[0] //昨天日期

						app.isSign = result.data.isSign //是否签到
						if (res.sign_day != today1 && res.sign_day != yesterday1) {
							app.pointsDay = 0 //接口返回日期不是今天，并且不是昨天 就把签到天数改成0
						} else {
							app.pointsDay = res.sign_count //共签到天数
						}
					})
			},
			// 获取签到积分数量
			getSetting() {
				const app = this
				SettingApi.data()
					.then(result => {
						const res = result.data.setting.points
						app.signInList.map(item => {
							if (item.day == '三') {
								item.points = res.three_points_num //3天签到赠送积分数量
							} else {
								item.points = res.day_points_num //除3天和7天  签到赠送积分数量
							}
						})
						app.sevenPoints = res.seven_points_num //7天签到赠送积分数量
					})
			},
			// 签到
			signInClick() {
				const app = this
				SignApi.sign()
					.then(result => {
						// 显示成功信息
						app.$success(result.message)
						if (result.status == 200) {
							// 刷新签到天数
							app.getSignIn()
						}
					})
			},
			formatDate(date, format = 'YYYY-MM-DD') {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return format
					.replace('YYYY', year)
					.replace('MM', month)
					.replace('DD', day);
			}

		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.top {
		height: 300rpx;
		color: #fff;
		padding-left: 10%;
		// background: linear-gradient(to right, #fca235, #fdc786);

		.top-big {
			font-weight: bold;

			text {
				font-size: 42rpx;
			}
		}

		.top-sma {
			font-size: 26rpx;
		}
	}

	.bottom {
		height: 400rpx;
		background: #fff;
		margin-top: -20rpx;
		padding: 0 30rpx;
		border-radius: 20rpx 20rpx 0 0;

		.bot-tit {
			font-weight: bold;
			padding: 30rpx 0;
		}

		.sign-in {
			.sign-item {
				width: 22%;
				height: 170rpx;
				color: #858587;
				border-radius: 15rpx;
				background: #f5f6fa;
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 0;

				.sign-day {
					font-size: 26rpx;
				}

				image {
					width: 60rpx;
				}

				.sign-points {
					font-size: 18rpx;
				}
			}

			.sign-item7 {
				width: 48%;
				flex-direction: row;
				align-items: flex-end;
				padding: 0;

				.sign-left {
					width: 50%;
					height: 170rpx;
					display: flex;
					padding: 15rpx 0;
					align-items: center;
					flex-direction: column;
					justify-content: space-between;
				}

				image {
					width: 110rpx;
					margin: 0 25rpx 25rpx 0;
				}
			}

			.sign-css {
				color: #333;
				background: rgba(125, 170, 53, 0.2);
			}
		}
	}

	.btn {
		width: 65%;
		height: 80rpx;
		border-radius: 50rpx;
		margin: 0 auto;
		margin-top: 180rpx;
		color: #fff;
		background: linear-gradient(to bottom, #7ca934, #b2bd88);
	}

	.btn-grey {
		color: #888888;
		background: #eee;
	}
</style>